<template>
  <div class="alter-container" v-if="type === 'H5'">
  
    <div class="vhead"  align="center">
  
      <div style="width: 12%;">
  
        <!--<span v-if="leftTitle" style="font-size:14px">{{leftTitle}}</span>-->
        
        <span @click="leftClick">
           <span v-if="leftTitle" style="font-size:14px">{{leftTitle}}</span>
          
          <icon v-if="isLeftIcon" :name="leftIconName" :scale="leftScale" class="iconBox" style="color:#101010;margin-top:-5px;margin:10px"></icon>
          
        </span>
      </div>
  
      <div style="width: 76%;">
        {{title}}
      </div>
  
      <div style="width: 12%;display: flex;align-items: center;visibility:hidden">
        <span @click="rightClick">
        <span v-if="rightTitle" style="font-size:14px">{{rightTitle}}</span>
          <icon v-if="isRightIcon" :name="rightIconName" scale="1.5" style="color:#101010;margin: 10px 10px"></icon>
        </span>
      </div>
    </div>
  <div class="baseLine" v-if="!lineShow"></div>
  </div>
  <!-- end container -->
</template>

<script type="text/javascript">
export default {
  props: [
    "title",
    "rightTitle",
    "leftTitle",
    "isLeftIcon",
    "leftIconName",
    "isRightIcon",
    "rightIconName",
    "lineShow",
    "skin"
  ],

  data() {
    return {
      type: "H5",
      leftScale: "1.5"
    };
  }, // end data
  methods: {
    setType() {
      let Stroge = window.localStorage;
      this.type = Stroge.interPage;
    },
    rightClick() {
      this.$emit("rightClick");
    },
    leftClick() {
      this.$emit("leftClick");
    },

    getBgColor() {
      let self = this;
      setTimeout(function() {
        if (self.$store.getters.getSkin != "") {
          // self.skinttop['background-color'] = self.$store.getters.getSkin
          return;
        } else {
          self.getBgColor();
        }
      }, 0);
    }
  },
  mounted() {
  this.setType()
    this.getBgColor();
    if (this.leftIconName == "angle-left") {
      this.leftScale = "2.0";
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.vhead {
  border-bottom: solid 1px #e5e5e5;
  justify-content: flex-end;
  height: 52px;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  position: fixed;
  z-index: 100;

  top: 0;
  padding: 0px;
  width: 100%;
  max-width: 640px;
  color: #101010;
}
.baseLine {
  width: 100%;
  height: 52px;
  margin-top: 0px;
  color: white;
}
</style>